<template>
    <div class="flex p-[8px] bg-page rounded-lg cursor-pointer">
        <div
            v-for="(item, index) in optionsLists"
            :key="index"
            class="flex-1 flex items-center justify-center py-[7px]
                   text-tx-regular rounded-[10px]"
            :class="{
                '!bg-primary !text-white': value === item.type
            }"
            @click="value = item.type"
        >
            <span class="mr-[5px]">{{ item.name }}</span>
            <el-tooltip
                :content="item.tips"
                placement="bottom"
                effect="light"
                :teleported="true"
            >
                <span class="flex">
                    <Icon name="el-icon-QuestionFilled" />
                </span>
            </el-tooltip>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useVModels } from '@vueuse/core'

const emits = defineEmits<{
    (event: 'update:modelValue', value: number): void
}>()

const props = withDefaults(
    defineProps<{
        modelValue: string;
    }>(),
    {}
)

const { modelValue: value } = useVModels(props, emits)

const optionsLists = [
    {
        type: 'muse',
        name: '灵感模式',
        tips: '只需输入一段歌曲描述，即可生成一首歌',
    },
    {
        type: 'lyric',
        name: '歌词模式',
        tips: '输入自己的歌词，即可生成一首歌',

    },
]
</script>
